<template>
	<div class="Book_ShoppingCart">
		<div class="nav">
			<div style="margin-left: 40%;">购物车</div>
			<div style="margin-left: 25%;">编辑</div>
			<div style="margin-left: 5%;">***</div>
		</div>
		<div>
			<table class="Cart">
				<tr v-for="(item,index) in goods">

					<td><input type="checkbox" :value="index" v-model="arr" @change="checkOther()" /></td>
					<td><img :src="`http://127.0.0.1/api/public/showimg/${item.book.pic}`" /></td>
					<td>
						<div>
							<div>{{item.book.name}}</div>
							<div>{{item.price}}</div>
						</div>
					</td>
					<td>
						<button @click="fun(index,-1)">-</button>
						{{item.num}}
						<button @click="fun(index,1)">+</button>
					</td>
				</tr>
			</table>
		</div>
		<div class="Cart_pay">
			<div style="margin: auto; display: flex;">
				<div>
					<input v-model="checkAll" type="checkbox" @change="check()" />
				</div>
				<div>-----------------------------------合计{{133}}-------</div>
				<div>
					<button @click="add">去结算{{3}}</button>
				</div>
			</div>


		</div>
		<table>

		</table>
	</div>
</template>

<script>
	export default {
		name: 'Book_ShoppingCart',
		data() {
			return {
				checkAll: false,
				goods: [],
				arr: [],
				Cart20rd: {
					ship2name: '',
					ship2phone: '',
					ship2addr: '',
					carts: []
				}
			}
		},
		methods: {
			add() {
				this.arr.forEach((item) => {
					this.Cart20rd.carts.push(this.goods[item])
				})
				this.$postj("/api/fore/cart/add2Order", this.Cart20rd)
				.then((resp) => {
							console.log(resp.data.data)
							this.getMyGoods()
						}) 
					},
					checkOther() {
						this.checkAll = this.arr.length == this.goods.length ? true : false;
						this.arr.sort((a, b) => {
							return a * b;
						})
					},
					check() {
						if (this.checkAll) {
							for (let i in this.goods) {
								this.arr.push(Number(i));
							}
						} else {
							this.arr = [];
						};
						this.arr = Array.from(new Set(this.arr)); //去重
						this.arr.sort((a, b) => {
							return a - b;
						})
					},
					fun(i, n) {
						console.log(i)
						console.log(n)
						console.log(this.goods[i])
						this.goods[i].num += n
						if (this.goods[i].num <= 0) {
							this.goods[i].num = 1
						}
					},
					getMyGoods() {
						this.goods=[];
						this.$get("/api/fore/cart/findMyCarts").then((resp) => {
							console.log(resp.data.data);
							resp.data.data.forEach((item) => {
								item.check = true
								this.goods.push(item)
							})

						})
					}
			},
			mounted() {
				this.getMyGoods();
				}
	}
</script>

<style>
	.Cart_pay {
		margin: auto;
		width: 100%;
		display: flex;
	}

	.Cart {
		width: 100%;
	}

	.Cart tr {
		background-color: #008000;
		border: solid green 1px;
		width: 100%;
	}

	.Cart img {
		width: 100px;
	}

	.Book_ShoppingCart {
		width: 100%;
		margin-top: 60px;
	}

	.nav {
		display: flex;
	}
</style>
